<template>
  <el-dialog v-model="visible" :title="dialogTitle" width="800px">
    <el-form :model="form" :rules="rules" label-width="auto" style="max-width: 600px">
      <el-form-item label="登录账号" prop="account" required>
        <el-input v-model="form.account" clearable />
      </el-form-item>
      <el-form-item label="姓名" prop="name" required>
        <el-input v-model="form.name" clearable />
      </el-form-item>
      <el-form-item label="邮箱" prop="email" required>
        <el-input v-model="form.email" clearable />
      </el-form-item>
      <el-form-item label="角色类型" required>
        <el-select v-model="form.type" placeholder="请选择你的角色类型"  @change="handleTypeChange">
          <el-option label="系统用户" value="system_user" />
          <el-option label="非系统用户" value="non-system_user" />
        </el-select>
      </el-form-item>
      <el-form-item label="角色名称" prop="role_name" required>
        <el-input v-model="form.role_name" clearable />
      </el-form-item>
      <el-form-item label="出生日期" required>
        <el-col :span="11">
          <el-date-picker
            v-model="form.date"
            type="datetime"
            placeholder="选择出生日期"
            style="width: 100%"
          />
        </el-col>
      </el-form-item>
      <el-form-item label="性别" required>
          <el-radio-group v-model="form.sex">
            <el-radio value="male" name="sex">男</el-radio>
            <el-radio value="female" name="sex">女</el-radio>
          </el-radio-group>
      </el-form-item>
      <el-form-item label="状态" required>
        <el-radio-group v-model="form.status">
          <el-radio value="true">正常</el-radio>
          <el-radio value="false">禁用</el-radio>
        </el-radio-group>
      </el-form-item>
      
      <el-form-item>
        <el-button type="primary" @click="onSubmit">确定</el-button>
        <el-button type="success" @click="onCancel">取消</el-button>
      </el-form-item>
    </el-form>
  </el-dialog>
</template>

<script lang="ts" setup>
import { ref, defineExpose, computed } from 'vue'
import { reactive } from 'vue'
import type { FormInstance, FormRules } from 'element-plus'

const currentMode = ref<number>(1) // 默认创建模式(1)
const visible = ref(false)
const form = reactive({
  account:'',
  name: '',
  type: '',
  role_name:'',
  date: '',
  sex:'',
  email:'',
  status: true,
})

interface RuleForm {
  account:string,
  name: string,
  type: string,
  role_name:'',
  date: string,
  sex:string,
  email:string,
  status: boolean,
}

const rules = reactive<FormRules<RuleForm>>({
  name: [{ required: true, message: '请输入姓名', trigger: ['blur', 'change'] }],
  account: [{ required: true, message: '请输入账号', trigger: ['blur', 'change'] }],
  role_name: [{ required: true, message: '请输入角色昵称', trigger: ['blur', 'change'] }],
  email: [{ required: true, message: '请输入邮箱', trigger: ['blur', 'change'] }],
})

const handleTypeChange = () => {
  form.role_name = ''  // 清空角色名称
}

// 计算属性：动态标题
const dialogTitle = computed(() => {
  return currentMode.value === 1 ? '新增用户' : '编辑用户'
})

// 计算属性：动态按钮文字
const submitButtonText = computed(() => {
  return currentMode.value === 1 ? '创建' : '保存'
})

const onSubmit = () => {
  if (currentMode.value === 1) {
    console.log('执行新增操作',form.account,form.name,form.email)
  } else {
    console.log('执行编辑操作',form.account,form.name,form.email)
  }
}

const onCancel = () => {
  // 重置表单数据
  Object.assign(form, form)
  // 关闭对话框
  visible.value = false
}

const open = (mode: number = 1) => {
  currentMode.value = mode
  visible.value = true
}

const close = () => {
  visible.value = false
}

// 暴露方法给父组件
defineExpose({
  open,
  close,
})
</script>